<script setup lang="ts">
import img1 from "@/assets/images/scene01.png";
import img2 from "@/assets/images/scene02.png";
import img3 from "@/assets/images/scene03.png";
import img4 from "@/assets/images/scene04.png";
const imgs = [
  {
    img: img1,
    // img: "https://img.js.design/assets/img/683d223a1c07b75ddb5e874f.png#de5a2991e38538e9c28d84d774da6443",
    title: "户外守护",
  },
  {
    img: img2,
    // img: "https://img.js.design/assets/img/683d219c321303f8e37daa79.png#3a6bbbc80eafb0a0a6c8b0fea57d0df7",
    title: "亲情互动",
  },
  {
    img: img3,
    // img: "https://img.js.design/assets/img/683d22636ef735a473cd0b4a.png#3372cbb2f3a3d19dd85b503126afe485",
    title: "停车守护",
  },
  {
    // img: "https://img.js.design/assets/img/683d227c0f790768eea5ee39.png#8026aee15d3202ac3f51486762af2a2c",
    img: img4,
    title: "仓库守护",
  },
];
</script>

<template>
  <!-- S 产品应用 -->
  <div class="m-[96px_43px] w-max-content mx-auto">
    <h3 class="mb-60px text-44px text-center font-500">产品应用</h3>

    <!-- S PC模式 -->

    <div class="">
      <div class="flex flex-wrap">
        <div
          class="flex-none w-1/4 scene-img-item"
          v-for="(item, index) in imgs"
          :key="index"
        >
          <div class="aspect-[1/1.275] overflow-hidden">
            <img
              class="w-full h-full duration-1000 hover:scale-125"
              :src="item.img"
              :alt="item.title"
            />
          </div>

          <p class="mt-3.5 text-26px text-center">{{ item.title }}</p>
        </div>
      </div>
    </div>
  </div>
  <!-- E 产品应用 -->
</template>

<style lang="less">
.scene-img {
  &-item {
    padding: 6px;
  }
}
</style>
